<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>日志查询</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elektron/dist/elektron.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/onoffcanvas/dist/onoffcanvas.min.css">
    <link rel="stylesheet" type="text/css" href="./css/codemirror.min.css">
    <link rel="stylesheet" type="text/css" href="./css/twilight.css">
    <link rel="stylesheet" type="text/css" href="./css/dracula.css">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
</head>

<body>
<div class="container">
    <div class="elk-app">
        <div class="elk-wrap diffs">
            <div class="elk-header">
                <nav>
                    <ul>
                        <li><a href="./home">参数配置</a></li>
                        <li><a href="./crontab">定时设定</a></li>
                        <li><a href="./diff">对比工具</a></li>
                        <li><a href="./run">手动执行</a></li>
                        <li class="active"><a href="./log">日志查询</a></li>
                        <li><a href="./changepwd">修改密码</a></li>
                        <li><a href="./logout">退出</a></li>
                    </ul>
                </nav>
                <header>
                    <a id="toggleIcon" class="onoffcanvas-toggler is-animated" href="#elk-side" data-toggle="onoffcanvas"></a>
                    <h1>日志查询</h1>
                    <button id="wrap" title="切换换行">切换换行</button>
                </header>
            </div>

            <div class="elk-container">
                <aside class="elk-side bg-light left-list" id="elk-side">
                    <div class="elk-side-content ">
                        <div class="elk-side-nav">
                            <ul class="nav flex-column" id="menu1">

                            </ul>

                        </div>
                    </div>

                </aside>
                <div class="elk-main">
                    <div class="wrapper">
                        <textarea id="code" name="code">  你还没有选择日志文件！</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <script src="./js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/onoffcanvas"></script>
    <script src="https://cdn.jsdelivr.net/npm/elektron"></script>
    <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
    <script src="./js/codemirror.min.js"></script>
    <script>
        $.ajaxSetup({ cache: false });

        var qrcode, userCookie;
        $(document).ready(function () {
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                lineWrapping: false,
                styleActiveLine: true,
                matchBrackets: true,
                readOnly: true,
                mode: 'shell',
                theme: 'dracula'
            });
            
            $.get('./api/logs', function (data) {
                var dirs = data.dirs;
                var navHtml = "";
                for (let index in dirs) {
                    var dirName = dirs[index].dirName;
                    // 文件在log/目录时
                    if (dirName === '@') {
                        var row = `<li class="nav-item">`;
                        for (let filesKey in dirs[index].files) {
                            var fileName = dirs[index].files[filesKey];
                            row += `<a class="nav-link" href="javascript:logDetail('${dirName}', '${fileName}');">${fileName}</a>`
                        }
                            row += `</li>`;
                    } else {
                        var row = `<li class="nav-item">
                                <a class="nav-link text-dark has-arrow" href="#">${dirName}</a>
                                <ul class="nav flex-column pl-1">
                                    <li class="nav-item">`;
                        for (let filesKey in dirs[index].files) {
                            var fileName = dirs[index].files[filesKey];
                            row += `<a class="nav-link" href="javascript:logDetail('${dirName}', '${fileName}');">${fileName}</a>`
                        }
                            row += `</li>
                                    </ul>
                                </li>`;
                        }
                    
                    navHtml += row;
                }
                $('#menu1').html(navHtml);
                $('#menu1').metisMenu();
            });

            window.logDetail = function logDetail(dir, file) {
                if (window.innerWidth < 993) {
                    dispatch(document.getElementById('toggleIcon'), 'click');
                }

                $.get(`./api/logs/${dir}/${file}`, function (data) {
                    editor.setValue(data);
                });
            }

            $('#wrap').click(function () {
                var lineWrapping = editor.getOption('lineWrapping');
                editor.setOption('lineWrapping', !lineWrapping);
            });


            //自动触发事件
            function dispatch(ele, type){
                try{
                    if(ele.dispatchEvent){  //标准浏览器

                        var evt = document.createEvent('Event');
                            evt.initEvent(type,true,true);
                            ele.dispatchEvent(evt);
                    }else{
                        ele.fireEvent('on' + type);
                    }
                }catch(e){};
                    
            }
        });
    </script>

</body>

</html>
